<template>
  <div id="AsnDetailList">
    <v-tableTitle :btnConfig="btnConfig" :tableSelectData="selectData" @poFill="newCreate" @del="del" @btnTableData="btnTableData"></v-tableTitle>
    <div class="detail">
      <component :data="{detailData,argument}" :is="currentComponent"></component>
    </div>
  </div>

</template>

<script>
import tableTitle from 'commons/TableTitle'
import navMenu from 'commons/NavMenu'
import baseMixin from '@/mixins/BaseMixin'

export default {
  name: 'DetailList',
  mixins: [baseMixin],
  data() {
    return {
      newFlag: false,
      detailsFlag: false,
      argument: {},
      detailData: {},
      selectData: [],
      detailNav: '1',
      componentConfig: [
        {
          name: 'detailTable',
          label: '',
          component: () => import('./page/detailTable.vue')
        }
      ]
    }
  },
  computed: {
    btnConfig() {
      return [
        {
          type: 'table',
          label: this.$t('app.addUser'),
          invalid: 'po',
          tableConfig: [
            {
              label: this.$t('app.userName'),
              prop: 'name',
              input: 'input'
            },
            {
              label: this.$t('app.userDesc'),
              prop: 'description',
              input: 'input'
            }
          ]
        },
        { label: this.$t('app.delUser'), disabled: true, invalid: 'del' }
      ]
    },
    currentComponent() {
      return this.componentConfig[this.detailNav - 1].component
    }
  },
  methods: {
    async btnTableData(page, date, callback) {
      let url = '/role/'
      try {
        let res = await this.$api.post(`${url}${page}`, {})
        callback(res)
      } catch (e) {
        this.$message.error(e)
      }
    },
    async newCreate(data) {
      let arr = []
      arr.push(data.id)
      try {
        let res = await this.$api.post(`/insertrole/${this.argument.id}`, arr)

        this.$message.success(res.returnMgr)
        this.$children[1].getTableData(1, {})
      } catch (e) {
        this.$message.error(e)
      }
    },
    //删除数据
    async del(data) {
      let arr = []
      data.forEach(item => {
        arr.push(item.id)
      })
      try {
        let res = await this.$api.post(`/deleterole/${this.argument.id}`, arr)

        this.$message.success(res.returnMgr)
        this.$children[1].getTableData(1, {})
      } catch (e) {
        this.$message.error(e)
      } finally {
        this.$children[1].$refs.table.delSelectData(data)
      }
    },
    //选中的数据
    setSelectData(data) {
      this.selectData = data
    }
  },
  mounted() {
    if (Object.keys(this.$store.state.skip).length !== 0) {
      let data = this.$store.state.skip
      this.argument = data.routeData
      this.detailData = data.detailList
      this.detailNav = data.detailListNav
    } else {
      this.argument = this.$store.state.routeData
    }
  },
  components: {
    'v-tableTitle': tableTitle,
    'v-navMenu': navMenu
  },
  watch: {
    selectData(data) {
      if (this.$parent.permissionStatus) {
        if (data.length > 0) {
          this.$parent.deleteRoleStatus = false
        } else {
          this.$parent.deleteRoleStatus = true
        }
      }
    }
  }
}
</script>

<style>
</style>
